<template>
	<view>
		<view class="title">
			<image src="../../static/shequ2.png" mode=""></image>
			<text>养花社区</text>
		</view>
		<view class="header">
			<view class="box">
				<text>推荐</text>
				<view></view>
			</view>
			<uni-icons type="search" size="30" style="float: right;margin-top: 20rpx;"></uni-icons>
			<uni-icons type="plusempty" size="30" style="float: right;margin-top: 20rpx;" @click="add"></uni-icons>
		</view>
		<view class="content">
			<view class="item" v-for="(v,i) in items" >
				<view class="head">
					<image src="../../static/QQ图片20230103165113.jpg" mode=""></image>
					<view class="title">
						<view>{{nklist[i]}}</view>
						<view>{{v.lunchTime}}</view>
					</view>
				</view>
				<view class="center" @click="topost(i)">
					<text>{{v.lunchTitle}}</text>
					<view class="images">
						<image :src="v.imgData" mode=""></image>
						<view class="image_box">
							<uni-icons type="image" size="15" color="white"></uni-icons>
							<text>1</text>
						</view>
					</view>
				</view>
				<view class="bottom">
					<text>{{v.lunchLabel}}</text>
					<view class="">
						<uni-icons type="heart" size="20" :color="guan==1?'#d8224a':'#000'" @click="guanzhu"></uni-icons>
						<text style="width: 40rpx;">111</text>
						<uni-icons type="chat-filled" size="20"></uni-icons>
						<text style="width: 40rpx;">999</text>
						<uni-icons type="redo" size="20"></uni-icons>
					</view>
				</view>
			</view>
			<uni-pagination @change="pageChanged" :current="pageIndex" :pageSize="pageSize" :total="pageTotle"/>
		</view>
	</view>
</template>

<script>
	import http from '@/utils/http.js'
	export default {
		data() {
			return {
				items:[],
				guan:0,
				pageIndex:1,//分页器页码
				pageSize:10,//分页器每页显示数据的条数
				pageTotle:50,//分页器数据总条数
				nklist:[],//用户昵称
			}
		},
		onShow(){
			this.getdata();
		},
		methods: {
			// 获取页面数据
			getdata(){
				http({
					url:'/lunch/page',
					method:'GET',
					params:{
						page:this.pageIndex,
						pageSize:this.pageSize
					},
					success:(res)=>{
						this.nklist=[];
						this.items=res.data.data.records;
						console.log(this.items);
						for(let i=0;i<this.items.length;i++){
							this.getuser(this.items[i].userId);
						}
					}
				})
			},
			getuser(id){
				uni.request({
					method:'GET',
					url:'http://mnxc.xyz:8080/lunch/'+id,
					success: (res) => {
						// console.log(res.data.data.nickName);
						this.nklist.push(res.data.data.nickName);
					}
				})
			},
			topost(i){
				uni.navigateTo({	
					url:'/pages/community/post?index='+i+'&page='+this.pageIndex+'&pageSize='+this.pageSize,
				})
			},
			add(){
				uni.navigateTo({
					url:'/pages/community/add',
				})
			},
			guanzhu(){
				this.guan=this.guan==0?1:0;
			},
			//点击分页器的监听函数
			pageChanged(e){
				console.log(e.current);
				this.pageIndex=e.current;
				this.getdata();
			}
		}
	}
</script>

<style>
.title{
	display: flex;
	align-items: center;
	margin-top: 70rpx;
}
.title image{
	width: 50rpx;
	height: 50rpx;
	margin-left: 20rpx;
}
.title text{
	margin-left: 20rpx;
}
.header{
	height: 100rpx;
	border-bottom: 1px solid #e6e6e6;
}
.header .box{
	margin: 0 20rpx;
	line-height: 100rpx;
	font-size: 40rpx;
	font-weight: bold;
	display: inline-block;
}
.header .box view{
	background-color: #41c20c;
	width: 40rpx;
	height: 5rpx;
	margin: 0 20rpx;
}
.content{
 padding: 0 20rpx;
}
.content .item{
	width: 710rpx;
	border-top: 1px solid #e6e6e6;
	border-bottom: 1px solid #e6e6e6;
}
.content .item .head{
	height: 70rpx;
	margin-top: 10rpx;
}
.content .item .head image{
	height: 60rpx;
	width: 60rpx;
	border-radius: 50%;
}
.content .item .head .title{
	padding: 0;
	margin: 0;
	margin-left: 20rpx;
	display: inline-block;
}
.content .item .head .title view{
	padding: 0;
	margin: 0;
	display: block;
}
.content .item .head .title view:nth-child(1){
	font-size: 27rpx;	
}
.content .item .head .title view:nth-child(2){
	font-size: 22rpx;
}
.content .item .center text{
	font-size: 35rpx;
}
.content .item .center .images{
	width: 100%;
	display: flex;
	justify-content: space-between;
	position: relative;
}
.content .item .center .images image{
	width: 230rpx;
	height: 225rpx;
}
.content .item .center .images .image_box{
	position: absolute;
	width: 65rpx;
	right: 10rpx;
	bottom: 10rpx;
	background-color: #737373;
	border-radius: 15rpx;
	display: flex;
	align-items: center;
}
.content .item .center .images .image_box text{
	font-size: 25rpx;
	margin-left: 5rpx;
	color: #fff;
}
.content .item .bottom{
	height: 50rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.content .item .bottom text{
	font-size: 25rpx;
	margin-left: 5rpx;
}
.content .item .bottom text:nth-child(1){
	color: #41c20c;
}
</style>
